/*
 * Chart labels
 */
.charts-css {

  &.bar {

    &:not(.show-labels) {
      --labels-size: 0;

      tbody tr th {
        display: none;
      }
    }
    &.show-labels {
      --labels-size: 80px;

      tbody tr th {
        display: flex;
        justify-content: var(--labels-align, center);
        align-items: center;
        flex-direction: column;
      }

      tr.hide-label th,
      th.hide-label {
        display: none;
      }
    }
    &.labels-align-start {
      tbody tr th {
        align-items: var(--labels-align, flex-start);
      }
    }
    &.labels-align-end {
      tbody tr th {
        align-items: var(--labels-align, flex-end);
      }
    }
    &.labels-align-center {
      tbody tr th {
        align-items: var(--labels-align, center);
      }
    }

  }

  &.column,
  &.area,
  &.line {

    &:not(.show-labels) {
      --labels-size: 0;

      tbody tr th {
        display: none;
      }
    }
    &.show-labels {
      --labels-size: 1.5rem;

      tbody tr th {
        display: flex;
        justify-content: var(--labels-align, center);
        align-items: center;
        flex-direction: column;
      }

      tr.hide-label th,
      th.hide-label {
        display: none;
      }
    }
    &.labels-align-start {
      tbody tr th {
        justify-content: var(--labels-align, flex-start);
      }
    }
    &.labels-align-end {
      tbody tr th {
        justify-content: var(--labels-align, flex-end);
      }
    }
    &.labels-align-center {
      tbody tr th {
        justify-content: var(--labels-align, center);
      }
    }

  }

}
